<!DOCTYPE html>
<html lang>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CMS Web Component</title>
    <script src="./index.js" type="module"></script>
    <link type="text/css" rel="stylesheet" href="./index.css" />
  </head>
  <body style="height: 500vh">
    <h4>CMS WEB Component</h4>
    <!-- 下面为loading组件的效果展示部分 -->
    <div class="loading">
      <cms-card shadow="hover">
        <div slot="head">Loading加载组件</div>
        <div style="margin-bottom: 20px">
          <button id="loadFullBtn">展示fullscreen loading</button>
          <button id="loadPartBtn">展示part loading</button>
        </div>
        <cms-loading type="fullscreen">
          <div>我是全屏的</div>
          <span slot="footer">Loading ~</span>
        </cms-loading>

        <div style="position: relative; width: 300px; height: 200px; border: 1px solid #409eff">
          <cms-loading type="part"></cms-loading>
          part loading效果将在此区域展示
        </div>
      </cms-card>
    </div>

    <!-- 下面为tag组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Tag标签组件</div>
        <cms-divider content-position="left">基础用法</cms-divider>
        <div style="margin-bottom: 40px">
          <cms-tag type="default">Default</cms-tag>
          <cms-tag type="success">Success</cms-tag>
          <cms-tag type="info">Info</cms-tag>
          <cms-tag type="warning">Warning</cms-tag>
          <cms-tag type="danger">Danger</cms-tag>
        </div>
        <cms-divider content-position="left">不同尺寸</cms-divider>
        <div style="margin-bottom: 30px">
          <cms-tag type="default" size="large">Default</cms-tag>
          <cms-tag type="success" size="large">Success</cms-tag>
          <cms-tag type="info" size="large">Info</cms-tag>
          <cms-tag type="warning" size="large">Warning</cms-tag>
          <cms-tag type="danger" size="large">Danger</cms-tag>
        </div>
        <div style="margin-bottom: 40px">
          <cms-tag type="default" size="small">Default</cms-tag>
          <cms-tag type="success" size="small">Success</cms-tag>
          <cms-tag type="info" size="small">Info</cms-tag>
          <cms-tag type="warning" size="small">Warning</cms-tag>
          <cms-tag type="danger" size="small">Danger</cms-tag>
        </div>
        <cms-divider content-position="left">圆形标签</cms-divider>
        <div style="margin-bottom: 40px">
          <cms-tag type="default" round="true">Default</cms-tag>
          <cms-tag type="success" round="true">Success</cms-tag>
          <cms-tag type="info" round="true">Info</cms-tag>
          <cms-tag type="warning" round="true">Warning</cms-tag>
          <cms-tag type="danger" round="true">Danger</cms-tag>
        </div>
        <cms-divider content-position="left">可移除标签</cms-divider>
        <div>
          <cms-tag type="default" closable="true">Default</cms-tag>
          <cms-tag type="success" closable="true">Success</cms-tag>
          <cms-tag type="info" closable="true">Info</cms-tag>
          <cms-tag type="warning" closable="true">Warning</cms-tag>
          <cms-tag type="danger" closable="true">Danger</cms-tag>
        </div>
      </cms-card>
    </div>

    <!-- alert组件效果展示 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Alert组件</div>
        <cms-divider content-position="left">基础用法</cms-divider>
        <div style="margin-bottom: 40px">
          <cms-alert type="success">alert组件效果展示：success</cms-alert>
          <cms-alert type="info">alert组件效果展示：info</cms-alert>
          <cms-alert type="warning">alert组件效果展示：warning</cms-alert>
          <cms-alert type="error">alert组件效果展示：error</cms-alert>
        </div>
        <cms-divider content-position="left">可移除标签</cms-divider>
        <div>
          <cms-alert type="success" closable="true">alert组件效果展示：success</cms-alert>
          <cms-alert type="info" closable="true">alert组件效果展示：info</cms-alert>
          <cms-alert type="warning" closable="true">alert组件效果展示：warning</cms-alert>
          <cms-alert type="error" closable="true">alert组件效果展示：error</cms-alert>
        </div>
      </cms-card>
    </div>

    <!-- tooltips组件效果展示 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Tooltips组件</div>
        <div style="padding: 0px 200px">
          <cms-tooltips
            placement="left"
            theme="dark"
            offset-x="5"
            trigger="click"
            show="true"
            enabled="true"
            strategy="absolute"
          >
            <cms-tag type="success">tooltip的Tag容器</cms-tag>
            <!-- <input type="text"> -->
          </cms-tooltips>
        </div>
      </cms-card>
    </div>
    <!-- 下面为divide组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Divider分界线组件</div>
        <div>
          <cms-divider></cms-divider>
          <cms-divider content-position="left">左</cms-divider>
          <cms-divider border-style="dashed">中</cms-divider>
          <cms-divider content-position="right" border-style="dashed">右</cms-divider>
        </div>
        <div>
          <span>测试1</span>
          <cms-divider direction="vertical"></cms-divider>
          <span>测试2</span>
          <cms-divider direction="vertical" border-style="dashed"></cms-divider>
          <span>测试3</span>
        </div>
      </cms-card>
    </div>

    <!-- 下面为button组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Button按钮组件</div>
        <cms-divider content-position="left">基础用法</cms-divider>
        <div style="margin-bottom: 20px">
          <cms-button>Default</cms-button>
          <cms-button type="success">Success</cms-button>
          <cms-button type="info">Info</cms-button>
          <cms-button type="warning">Warning</cms-button>
          <cms-button type="danger">Danger</cms-button>
        </div>
        <div style="margin-bottom: 20px">
          <cms-button plain>Default</cms-button>
          <cms-button type="success" plain>Success</cms-button>
          <cms-button type="info" plain>Info</cms-button>
          <cms-button type="warning" plain>Warning</cms-button>
          <cms-button type="danger" plain>Danger</cms-button>
        </div>
        <div style="margin-bottom: 40px">
          <cms-button round>Default</cms-button>
          <cms-button type="success" round>Success</cms-button>
          <cms-button type="info" round>Info</cms-button>
          <cms-button type="warning" round>Warning</cms-button>
          <cms-button type="danger" round>Danger</cms-button>
        </div>
        <cms-divider content-position="left">禁用状态</cms-divider>
        <div style="margin-bottom: 20px">
          <cms-button disabled>Default</cms-button>
          <cms-button type="success" disabled>Success</cms-button>
          <cms-button type="info" disabled>Info</cms-button>
          <cms-button type="warning" disabled>Warning</cms-button>
          <cms-button type="danger" disabled>Danger</cms-button>
        </div>
        <div style="margin-bottom: 20px">
          <cms-button plain disabled>Default</cms-button>
          <cms-button type="success" plain disabled>Success</cms-button>
          <cms-button type="info" plain disabled>Info</cms-button>
          <cms-button type="warning" plain disabled>Warning</cms-button>
          <cms-button type="danger" plain disabled>Danger</cms-button>
        </div>
      </cms-card>
    </div>

    <!-- 下面为avatar组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Avatar头像组件</div>
        <cms-avatar
          shape="square"
          size="small"
          lazy-load="true"
          src="./assets/avatarTest.png"
          error="funcError()"
          load="funcLoad()"
          previewable="true"
          preview-url="./assets/background.png"
        ></cms-avatar>
        <cms-avatar
          shape="circle"
          size="large"
          lazy-load="false"
          src="./assets/background.png"
          alt="fff"
          fit="cover"
          error="funcError()"
          load="funcLoad()"
        ></cms-avatar>
      </cms-card>
    </div>

    <!-- 下面为tab组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Tab组件标签</div>
        <cms-tabs active="9">
          <cms-tabs-item label="Loading组件">
            <div>局部Loading展示</div>
            <cms-loading type="part" loading></cms-loading>
          </cms-tabs-item>
          <cms-tabs-item label="Tag组件展示">
            <cms-tag size="large">Tag</cms-tag>
            <cms-tag type="success">Tag</cms-tag>
            <cms-tag type="info" size="small">Tag</cms-tag>
            <cms-tag type="warning" size="large" round="true">Tag</cms-tag>
            <cms-tag type="danger" round="true">Tag</cms-tag>
            <cms-tag size="small" round="true">Tag</cms-tag>
          </cms-tabs-item>
          <cms-tabs-item label="Alert组件展示">
            <cms-alert closable="true">alert组件效果展示：true</cms-alert>
            <cms-alert type="error">alert组件效果展示：error</cms-alert>
            <cms-alert type="info">alert组件效果展示：info</cms-alert>
            <cms-alert type="success">alert组件效果展示：success</cms-alert>
            <cms-alert type="warning">alert组件效果展示：warning</cms-alert>
          </cms-tabs-item>
          <cms-tabs-item label="Rate组件展示">
            <cms-rate max="5" value="2"></cms-rate><br />
            <cms-rate max="8" style="--edge: 50px" half value="2.5"></cms-rate>
            <cms-rate max="6"></cms-rate>
          </cms-tabs-item>
          <cms-tabs-item label="Divider组件展示">
            <cms-divider></cms-divider>
            <cms-divider content-position="left">左</cms-divider>
            <cms-divider>中</cms-divider>
            <cms-divider content-position="right" border-style="dashed">右</cms-divider>
          </cms-tabs-item>
          <cms-tabs-item label="Test">
            <h5>Test 5</h5>
            <h5>Test 5</h5>
            <h5>Test 5</h5>
            <h5>Test 5</h5>
            <h5>Test 5</h5>
          </cms-tabs-item>
        </cms-tabs>
      </cms-card>
    </div>
    <!-- 下面为pagination&&collapse组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Collapse组件</div>
        <cms-collapse display="false" disabled="false">
          <div slot="head">Collapse</div>
          <div>折叠框组件测试1</div>
          <div>折叠框组件测试2</div>
          <div>折叠框组件测试3</div>
          <div>折叠框组件测试4</div>
          <div>折叠框组件测试5</div>
        </cms-collapse>
      </cms-card>
    </div>
    <!-- 下面为Pagination组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Pagination组件</div>
        <cms-pagination
          total="30"
          page-size="3"
          pager-count="5"
          current-change="currentChangeFunc()"
          page-sizes="[2,4,5,10]"
          prev-click="prevClickFunc()"
          next-click="nextClickFunc()"
        ></cms-pagination>
      </cms-card>
    </div>
    <!-- 下面为link组件的效果展示部分 -->
    <div style="margin-top: 50px">
      <cms-card shadow="hover">
        <div slot="head">Link组件</div>
        <cms-divider content-position="left">基础用法</cms-divider>
        <div style="margin-bottom: 30px">
          <cms-link href="www.baidu.com">default</cms-link>
          <cms-link type="success" href="www.baidu.com">success</cms-link>
          <cms-link type="info" href="www.baidu.com">info</cms-link>
          <cms-link type="warning" href="www.baidu.com">warning</cms-link>
          <cms-link type="danger" href="www.baidu.com">danger</cms-link>
        </div>
        <cms-divider content-position="left">禁用状态</cms-divider>
        <div>
          <cms-link href="www.baidu.com" disabled>default</cms-link>
          <cms-link type="success" href="www.baidu.com" disabled>success</cms-link>
          <cms-link type="info" href="www.baidu.com" disabled>info</cms-link>
          <cms-link type="warning" href="www.baidu.com" disabled>warning</cms-link>
          <cms-link type="danger" href="www.baidu.com" disabled>danger</cms-link>
        </div>
      </cms-card>
    </div>
    <script>
      /**
       * querySelector()返回文档中与指定选择器（组）相匹配的第一个 Element 对象。如果找不到则返回null
       * 更多 web api 见参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document
       */

      //  为按钮添加点击事件，每次点击切换loading状态
      document.querySelector('#loadFullBtn').addEventListener('click', () => {
        const cmsLoad = document.querySelector('cms-loading');
        /**
         * toggleAttribute() 方法切换给定元素的某个布尔值属性的状态（如果属性不存在则添加属性，属性存在则移除属性）。
         */
        cmsLoad.toggleAttribute('loading');
        setTimeout(() => {
          cmsLoad.removeAttribute('loading');
        }, 2000);
      });
      document.querySelector('#loadPartBtn').addEventListener('click', () => {
        const cmsLoad = document.querySelectorAll('cms-loading')[1];
        cmsLoad.toggleAttribute('loading');
      });
      function funcLoad() {
        console.log('load');
      }
      function funcError() {
        console.log('error');
      }
      function currentChangeFunc() {
        console.log('test-currentChangeCallback');
      }
      function prevClickFunc() {
        console.log('test-prevClickCallback');
      }
      function nextClickFunc() {
        console.log('test-nextClickCallback');
      }

      document.querySelector('cms-tabs').addEventListener('change', e => {
        console.log('当前切换tab为 -> ', e.detail);
      });

      document.querySelector('cms-rate').addEventListener('rate', e => {
        console.log(e.detail);
      });
    </script>
  </body>
</html>
